<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>职位详情</title>
      <link rel="stylesheet" type="text/css" href="../css/style.css"/>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
          body{width: 100%;height: 100%;}
          .jobDetails{width: 100%}
          .top{background-color: rgb(240,180,48);}
          .top .return{background: rgb(240,180,48);}
          .top .title{padding: 80px 20px 0;color: #fff;font-size: 20px;box-sizing: padding-box;}
          .detail{display: flex;padding: 22px 20px 50px;justify-content: space-between;align-items: center;}
          .detail .type{display: flex;align-items: center;}
          .detail .type span{padding: 3px 7px;color: #8B8EA3;font-size: 11px;background-color: #E4E7F0;border-radius: 5px;}
          .detail .type span.light{color: #000;background-color: #F7F8FA;}
          .detail .type span.marR{margin-right: 10px}
          .detail .money{color: #fff;}
          .detail .money span.font{font-size: 24px}
          .content{width:100%;height: 100%;border-top-left-radius: 30px;border-top-right-radius: 30px;margin-top: -30px;background-color: #fff}
          .concat{padding: 30px 20px;}
          .concat .titles{font-size: 16px;color: #000;padding-bottom: 10px;}
          .concat .types{font-size: 14px; color: #FBBB3F;}
          .button{padding: 0 20px 25px;justify-content: space-between;align-items: center;}
          .button .similar{height: 45px;background-color: #F7F8FA;border-radius: 10px;display: flex;align-items: center;flex: 1;justify-content: center;}
          .button .copy {margin-right: 17px;}
          .button .copy img{width: 18px;height:22px;margin-right: 9px}
          .button .copy span{color: #FFAC00;font-size: 15px}
          .button .collect img{width: 17px;height: 17px;margin-right: 9px}
          .button .collect span{color: #555;font-size: 15px}
          .jobdescribe h4{padding-bottom: 14px;align-items: center;}
          .jobdescribe .kuai{width: 15px;height: 14px;margin-right: 4px;background-color: #FFAC00;}
          .jobdescribe .title{font-size: 16px;color: #000;}
          .jobcontent{padding: 0 20px ;}
          .jobcontent .marB{margin-bottom: 20px}
          .jobcontent .padB{padding-bottom: 30px}
          .jobcontent .jobp p{line-height: 20px;color: #777;font-size: 13px}
          .apply{padding: 30px 28px 30px;position: absolute;}
          .apply button{width: 85%;height: 50px;margin: 0 auto;background-color: #FBBB3F;border-radius: 30px;font-size: 16px;color: #fff;position: fixed;bottom: 20px;}

          .show{display: block;}
          .none{display: none}
          .boxpout{width: 100%;height: 100%;}
          .bg{background-color: rgba(0,0,0,0.4);display: flex;justify-content: center;align-items: center;top: 0;left: 0;width: 100%;height: 100%;z-index: 30;position: fixed;}
          .box{z-index: 99;width: 76%;height: 380px;background-color: #fff;border-radius: 20px;position: relative;}
          .box img.close{width: 26px;height: 26px;position: absolute;bottom: -40px;left: 50%;margin-left: -13px;}
          .box .icon{display: flex;}
          .box .icon img.success{margin: 40px auto 30px;width:140px;height: 102px;}
          .box .boxhtml{text-align: center;}
          .box .boxhtml h3{font-size: 20px;color: #000;font-weight: 600;margin-bottom:15px }
          .boxhtml p{font-size: 16px;color: #999;line-height: 24px;}
          .boxhtml p.wechat{font-size: 18px;color:  #FFAC00;}
          .boxhtml .btn{display: flex;}
          .boxhtml .btn button{margin: 25px auto 0;width: 53%;height: 45px;border-radius: 12px;background: #FFAC00;color: #fff;font-size: 15px;}
      </style>
  </head>
  <body>
    <div class="jobDetails">
      <div class="top">
        <div class="returnBox">
          <div class="return"> <img src="../image/return.png" onclick="api.closeWin()"> </div>
        </div>
        <div class="title line1"></div>
        <div class="detail">
          <div class="type">
            <span class="marR light" id="day"></span>
            <span class="marR" id="sex"></span>
            <span class="qi" id="qi"></span>
          </div>
          <div class="money"><span class="font"> </span> 元/<span id="ci"></span></div>
        </div>
      </div>
      <div class="content">
        <div class="concat">
          <p class="titles"></p>
          <p class="types">联系方式: <span id="types">***(报名后可查看)</span></p>
        </div>
        <div class="button flex-wrap">
          <div class="similar copy"><img src="../image/iphone.png" ><span id="copy">报名后可复制</span></div>
          <div class="similar collect"><img src="../image/job.png" class="bookmarket"><span class="enshrine">收藏</span></div>
        </div>
        <div class="jobdescribe ">
          <h4 class="flex-wrap"><span class="kuai"></span> <span class="title">工作描述</span></h4>
          <div class="jobcontent">
            <!-- <div class="jobp marB">
              <p>做家教请投简历，本招聘长期有效，我们会联系您面试。</p>
            </div> -->
            <div class="detailcontent jobp marB">
              <!-- <p>任职要求：</p>
              <p class="detailcontent"></p> -->
              <!-- <p>2.家教内容：英语科目</p>
              <p>3.学历本科及以上学历，可接在校大学生时间安排。</p>
              <p>周末兼职地点：全市区及周边就近安排上门。</p> -->
            </div>
            <!-- <div class="jobp marB">
              <p>招聘人员：</p>
              <p>学有余力，想在业余时间带家教的在校或已毕业大学生，以及中小学在职老师。</p>
            </div>
            <div class="jobp marB padB">
              <p>薪酬待遇：</p>
              <p>根据个人能力评定，薪资月结。</p>
              <p>特别备注老师1对1上门授课，上课地点就近匹配！</p>
            </div> -->
          </div>
        </div>
        <div class="jobdescribe ">
          <h4 class="flex-wrap"><span class="kuai"></span> <span class="title">工作时间</span></h4>
          <div class="jobcontent">
            <div class="jobp marB">
              <p class="time">不限</p>
            </div>
          </div>
        </div>
        <div class="jobdescribe ">
          <h4 class="flex-wrap"><span class="kuai"></span> <span class="title">工作地点</span></h4>
          <div class="jobcontent">
            <div class="jobp marB padB">
              <p class="adress">不限</p>
            </div>
          </div>
        </div>
        <div class="apply flex-wrap">
          <button type="button" >立即报名</button>
        </div>
      </div>
    </div>

    <div class="boxpout none">
      <div class="bg">
        <div class="box">
          <div class="icon">
            <img src="../image/success.png" class="success">
          </div>
          <div class="boxhtml">
            <h3>报名成功</h3>
            <p>请主动联系商家完成</p>
            <p>录取内容，才能成功入职</p>
            <p class="wechat"></p>
            <div class="btn">
              <button id="jump">复制并跳转微信</button>
            </div>
          </div>
          <img src="../image/boxClose.png" class="close">
        </div>
      </div>

    </div>
  </body>
  </html>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/encrypt.js"></script>
  <script type="text/javascript">
      function funcGoto(){
        window.location.reload()
      }
      apiready = function(){
        var base = new Base64();
        var userid = $api.getStorage('userID');
        var jianZhiID = api.pageParam.jianZhiID
        var json = {}
        if(userid){

          json = {'userID':userid,'jianZhiID':jianZhiID}
        }else{
          json = {'userID':'00000000-0000-0000-0000-000000000000','jianZhiID':jianZhiID}
        }
        var parameter = base.encode(JSON.stringify(json));
        var signValue = parameter + secretKey
        var sign = signValue.MD5(32)

        var onOff;  //是否收藏
        init()
        function init(){

          $api.post(url+'getJobDetail.ashx', {values:{parameter:parameter,sign:sign}}, function(ret){
            if(ret.code == 200){


              $api.html($api.dom('.title'), ret.data.listTitle);
              $api.attr($api.dom('.collect'),'data-mark', ret.data.bookmarkID);

              switch (ret.data.paymentTerms) {//结算方式
                case '10':
                $api.html($api.dom('#day'), '日结');
                break;
                case '20':
                $api.html($api.dom('#day'), '周结');
                break;
                case '30':

                $api.html($api.dom('#day'), '月结');
                break;
              }
              switch (ret.data.sex) {//性别要求
                case '10':
                $api.html($api.dom('#sex'), '仅限男');
                break;
                case '20':
                $api.html($api.dom('#sex'), '仅限女');
                break;
                case '30':
                $api.html($api.dom('#sex'), '男女不限');
                break;
              }
              switch (ret.data.effective) {//有效时间
                case '10':
                $api.html($api.dom('#qi'), '长期');
                break;
              }
              $api.html($api.dom('.font'), ret.data.salary);

              switch (ret.data.salaryUnit) { //薪水单位
                case '10':
                $api.html($api.dom('#ci'), '小时');
                break;
                case '20':
                $api.html($api.dom('#ci'), '天');
                break;
                case '30':
                $api.html($api.dom('#ci'), '次');
                break;

              }
              $api.html($api.dom('.titles'), ret.data.detailTitle); //公司详情
              $api.html($api.dom('.adress'), ret.data.workLocation); //地址
              $api.html($api.dom('.time'), ret.data.workTime); //地址
              $api.html($api.dom('.detailcontent'), ret.data.detailContent); //工作描述
              if(ret.data.contactInfo){

                $api.html($api.dom('#types'), ret.data.contactInfo);
                $api.html($api.dom('.wechat'), ret.data.contactInfo);

              }

              if(ret.data.isDelivered == 1){//是否报名

                $api.html($api.dom('#copy'), '已报名可复制');

                var clipBoard = api.require('clipBoard');
                $api.addEvt($api.dom('.copy'), 'click', function(){
                  clipBoard.set({
                      value: ret.data.contactInfo
                  }, function(ret, err) {
                      if (ret) {
                        api.toast({
                          msg: '复制成功',
                          duration: 2000,
                          location: 'middle'
                        });
                      } else {
                        api.toast({
                          msg: '复制失败',
                          duration: 2000,
                          location: 'middle'
                        });
                      }
                  });
                });

              }

              if(ret.data.bookmarkID){//收藏
                $api.html($api.dom('.enshrine'), '已收藏');
                $api.attr($api.dom('.bookmarket'),'src','../image/havecollect.png')
                onOff = true

              }else {//没收藏
                $api.html($api.dom('.enshrine'), '收藏');
                $api.attr($api.dom('.bookmarket'),'src','../image/job.png')
                onOff = false
              }


            }else{
              api.toast({
                msg: ret.msg,
                duration: 2000,
                location: 'middle'
              });
            }
          })
        }

        $api.addEvt($api.dom('.collect'), 'click', function(){ // 收藏
          var userid = $api.getStorage('userID');
          if(userid){ // 已经登录
            if(onOff){ //已收藏
              var bookmarkID = $api.attr($api.dom('.collect'),'data-mark');
              var jsons = {'userID':userid,'bookmarkID':bookmarkID}
              var parameters = base.encode(JSON.stringify(jsons));
              var signValues = parameters + secretKey
              var signs = signValues.MD5(32)

              $api.post(url+'cancelJianzhiBookmark.ashx', {values:{parameter:parameters,sign:signs}}, function(ret){ //取消收藏

                if(ret.code == 200){
                  init()


                  api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'middle'
                  });
                }else{
                  api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'middle'
                  });
                }
              })
            }else{

              $api.post(url+'submitJianzhiBookmark.ashx', {values:{parameter:parameter,sign:sign}}, function(ret){ //收藏
                if(ret.code == 200){
                  init()

                  api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'middle'
                  });
                }else{
                  api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'middle'
                  });
                }
              })
            }

          }else{ //没有登陆
            api.openWin({
                name: 'login',
                url: './login.html'
            });

          }
        });


      $api.addEvt($api.dom('#jump'), 'click', function(){//复制跳转微信
        var clipBoard = api.require('clipBoard');
        var copyhtml = $api.html($api.dom('.wechat'));

          clipBoard.set({
              value: copyhtml
          }, function(ret, err) {
              if (ret) {
                $api.removeCls($api.dom('.boxpout'),'show')
                $api.addCls($api.dom('.boxpout'),'none')
                init()
                var systemType = api.systemType;
                if(systemType == 'android'){
                  api.openApp({
                    androidPkg: 'com.tencent.mm',
                    mimeType: 'text/html',
                    uri: 'weixin://'
                    }, function(ret, err) {
                        if (ret) {

                        } else {
                             alert("您还未安装微信");
                        }
                  });
                }
                if(systemType == 'ios'){
                  api.openApp({
                      iosUrl: 'weixin://',     //打开微信，其中weixin为微信的URL Scheme
                  });

                }



              } else {
                api.toast({
                  msg: '复制失败',
                  duration: 2000,
                  location: 'middle'
                });
              }
          });

      });



        $api.addEvt($api.dom('.apply'), 'click', function(){ //立即报名
          var userid = $api.getStorage('userID');

          if(userid){//已登录
            var json = {'userID':userid,'jianZhiID':jianZhiID}
            var parameter = base.encode(JSON.stringify(json));
            var signValue = parameter + secretKey
            var sign = signValue.MD5(32)
            $api.post(url+'submitJobResume.ashx', {values:{parameter:parameter,sign:sign}}, function(ret){
              if(ret.code == 200){

                $api.removeCls($api.dom('.boxpout'),'none')
                $api.addCls($api.dom('.boxpout'),'show')
                $api.html($api.dom('.wechat'), ret.data.contactInfo);
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'middle'
                });

              }
            })

          }else{//没有登陆
            api.openWin({
                name: 'login',
                url: './login.html'
            });
          }

        });


        $api.addEvt($api.dom('.close'), 'click', function(){ //关闭弹窗
          $api.removeCls($api.dom('.boxpout'),'show')
          $api.addCls($api.dom('.boxpout'),'none')
          init()
        });

      }

  </script>
